<template>
  <div class="login">
    <van-nav-bar
  title="今日头条"
  fixed
  class="header"
/>
  <van-form @submit="login">
  <van-field
    v-model="form.mobile"
    required
    label="用户名"
    placeholder="用户名"
    type="tel"
    :rules="rules.mobile"
  />
  <van-field
    v-model="form.code"
    type="password"
    required
    label="密码"
    placeholder="密码"
    :rules="rules.code"
  />
  <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" >提交</van-button>
  </div>
</van-form>
  </div>

</template>

<script>
// 引入组件
// import bus from '../utils/bus.js'
import { loginAPI } from '../API/userAPI.js'
import { mapMutations } from 'vuex'
// import { refresh } from '../API/refresh_token.js'
export default {

  name: 'Login',
  data () {
    return {
      form: {
        // 用户手机号
        mobile: '18612345678',
        code: '246810'
      },
      rules: {
      // 手机号的校验规则
        mobile: [{ required: true, message: '请填写您的手机号', trigger: 'onBlur' }],
        // 密码的校验规则
        code: [{ required: true, message: '请填写您的密码', trigger: 'onBlur' }]
      }
    }
  },
  component: {

  },
  methods: {
    ...mapMutations(['upTokenInfo']),
    onSubmit (values) {
      // localStorage.setItem('state', this.form.mobile)
      this.upTokenInfo(this.form)

      // bus.$emit('share', { username: this.username, password: this.password })
      this.$router.push({
        name: 'User',
        query: { username: this.form.mobile }
      })
      // console.log('submit', values
    },
    async login () {
      const { data: res } = await loginAPI(this.form)

      if (res.message === 'OK') {
        // 3. 把登录成功的结果，存储到 vuex 中
        this.upTokenInfo(res.data)
        // 4. 要跳转到当前页面或者首页
        const navPath = this.$route.query.pre || '/'

        this.$router.replace(navPath)
      }
    }

  },
  created () {
    // const res = refresh()
    // console.log(res)
  }
}
</script>

<style lang="less" scoped>
.login{
  padding-top: 1.3514rem;

}

</style>
